<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix PopupButton (Right to Left support)</title>

    <link rel="stylesheet" href="../demos.css" />
    <script type="module" src="../../define/PopupButton.js"></script>

    <style>
      html {
        height: 100%;
      }

      body {
        height: 100%;
        padding: 0;
      }
    </style>
  </head>

  <body role="main">
    <div class="demo fullScreen" style="overflow: auto" dir="rtl">
      <style>
        .buttonGrid {
          align-items: center;
          display: grid;
          grid-template-areas:
            "a a a"
            "b . c"
            "d d d";
          grid-template-rows: auto 1fr auto;
          grid-template-columns: auto 1fr auto;
          height: 100%;
          justify-items: center;
        }

        .vertical {
          display: grid;
        }

        elix-popup-button {
          margin: 1em;
        }

        .popup {
          align-items: center;
          box-sizing: border-box;
          display: flex;
          height: 200px;
          max-height: 100%;
          max-width: 100%;
          justify-content: center;
          white-space: nowrap;
          width: 200px;
        }
      </style>
      <div class="buttonGrid">
        <div style="grid-area: a">
          <elix-popup-button popup-align="start" popup-direction="below">
            <span slot="source">Below start</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button popup-align="center" popup-direction="below">
            <span slot="source">Below center</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button popup-align="stretch" popup-direction="below">
            <span slot="source">Below stretch</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button popup-align="end" popup-direction="below">
            <span slot="source">Below end</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
        </div>
        <div class="vertical" style="grid-area: b">
          <elix-popup-button popup-align="top" popup-direction="row">
            <span slot="source">Row top</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button popup-align="center" popup-direction="row">
            <span slot="source">Row center</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button popup-align="stretch" popup-direction="row">
            <span slot="source">Row stretch</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button popup-align="bottom" popup-direction="row">
            <span slot="source">Row bottom</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
        </div>
        <div class="vertical" style="grid-area: c">
          <elix-popup-button popup-align="top" popup-direction="row-reverse">
            <span slot="source">Reverse top</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button popup-align="center" popup-direction="row-reverse">
            <span slot="source">Reverse center</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button
            popup-align="stretch"
            popup-direction="row-reverse"
          >
            <span slot="source">Reverse stretch</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button popup-align="bottom" popup-direction="row-reverse">
            <span slot="source">Reverse bottom</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
        </div>
        <div style="grid-area: d">
          <elix-popup-button popup-align="start" popup-direction="above">
            <span slot="source">Above start</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button popup-align="center" popup-direction="above">
            <span slot="source">Above center</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button popup-align="stretch" popup-direction="above">
            <span slot="source">Above stretch</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
          <elix-popup-button popup-align="end" popup-direction="above">
            <span slot="source">Above end</span>
            <div class="popup">Popup</div>
          </elix-popup-button>
        </div>
      </div>
    </div>
  </body>
</html>
